<template>
  <div class="c-martin__input__content">
    <div class="c-martin__input__contain">
      <input :type="type" v-model="text" class="c-martin__input" @focus="focus = true" @blur="blur">
      <span :class="['c-martin__input__placholder', {'c-martin_placeholder--active': focus}]">{{placeholder}}</span>
      <span :class="['c-martin__input__border', {'c-martin__border--active': focus}]"></span>
      <i :class="['iconfont', {'c-input__clear': !!text}]" @click="text = ''; focus = false">&#xe751;</i>
    </div>
  </div>
</template>

<script>
export default {
  name: 'MartinInput',
  props: {
    placeholder: {
      type: String,
      default: '',
      required: false
    },
    type: {
      type: String,
      default: 'text',
      required: false
    },
    value: {
      type: String,
      default: '',
      required: false
    }
  },
  data() {
    return {
      focus: false,
      text: this.value
    }
  },
  methods: {
    blur() {
      this.focus = !!this.text
    }
  },
  watch: {
    text(n) {
      this.$emit('input', this.text)
    },
    value(n) {
      if (n) {
        this.focus = true
      }
      this.text = n
    }
  }
}
</script>

<style>
.c-martin__input__contain {
  /* width: 1000px !important; */
  /* width: 100%; */
}
</style>
